<template>
  <div class="FooterMusic">
    <div class="footerLeft" @click="showPopup">
      <img :src="playList[playListIndex].al.picUrl" alt="" />
      <div>
        <p>{{ playList[playListIndex].name }}</p>
        <span v-for="item in playList[playListIndex].ar" :key="item.name">{{item.name}}</span>
      </div>
    </div>
    <div class="footerRight">
      <!-- 暂停图标 -->
      <van-icon name="play-circle" size="30" color="#999" @click="play" v-if="isbtnShow" />
      <!-- 播放图标 -->
      <van-icon name="pause-circle" size="30" color="#999" @click="play" v-else />
      <van-icon name="bars" size="30" color="#999" />
    </div>
    <!-- 当前播放器 -->
    <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
    <!-- 当前播放的弹出层 -->
    <van-popup v-model:show="detailShow" position="right" :style="{ height: '100%',width:'100%'}">
      <Detail :musicList="playList[playListIndex]" :play="play"></Detail>
    </van-popup>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import Detail from '@/components/musics/Detail.vue'
export default {
  name: 'Foot',
  data() {
    return {
      // 传送当前播放时间的定时器名
      interVal: 0
    }
  },
  components: {
    Detail
  },
  computed: {
    // 利用辅助函数获取store.js里面的数据
    ...mapState(['playList', 'playListIndex', 'isbtnShow', 'detailShow'])
  },
  created() {
    // 组件创建完成后立即根据当前的歌曲ID调用请求歌词的函数
    this.$store.dispatch('getLyric', this.playList[this.playListIndex].id)
    // 组件创建完成后需要调用传送当前歌曲播放时间的定时器
    this.updateTime()
  },
  updated() {
    // 组件内数据更新时也立即根据当前的歌曲ID调用请求歌词的函数
    this.$store.dispatch('getLyric', this.playList[this.playListIndex].id)
    // 切换歌曲时也有调用传送当前歌曲总时长的函数
    this.addDuration()
  },
  methods: {
    // 监听播放、暂停音乐的事件
    play() {
      // 判定如果当前暂停歌曲，点击播放时，图标变为播放图标,并且播放歌曲
      if (this.$refs.audio.paused) {
        this.$refs.audio.play()
        this.updateIsbtnShow(false)
        // 播放时需要用定时器函数不断传送当前的播放时间
        this.updateTime()
      } else {
        this.$refs.audio.pause()
        this.updateIsbtnShow(true)
        // 暂停时则清除传送当前播放时间点的定时器
        clearInterval(this.interVal)
      }
    },

    // 监听打开、关闭当前播放的弹出层事件
    showPopup() {
      this.updateDetailShow()
    },

    // 监听每秒进行传送当前播放时间事件
    updateTime() {
      this.interVal = setInterval(() => {
        this.updateCurrentTime(this.$refs.audio.currentTime)
      }, 500)
    },

    // 监听传送当前播放歌曲总时长的事件
    addDuration() {
      this.updateDuration(this.$refs.audio.duration)
    },

    // 利用辅助函数获取store.js里面的更改函数
    ...mapMutations(['updateIsbtnShow', 'updateDetailShow', 'updateCurrentTime', 'updateDuration'])
  },

  watch: {
    // 监听是否切换推荐歌单里面歌曲时，代表播放歌曲下标发生更改，当前正在播放的歌曲要显示为当前点击的歌曲
    playListIndex() {
      // 自动播放
      this.$refs.audio.autoplay = true
      // 调用传送当前播放时间的定时器函数
      this.updateTime()
      // 判断歌曲当前是否为暂停状态
      if (this.$refs.audio.paused) {
        this.updateIsbtnShow(false)
      }
    },

    // 监听播放列表是否有变化，再判断当前更新播放列表后当前选中的歌曲是否有播放，如果没有播放则自动播放，并且图标更改
    playList() {
      if (this.$refs.audio.paused) {
        this.$refs.audio.autoplay = true
        this.updateIsbtnShow(false)
        // 调用传送当前播放时间的定时器函数
        this.updateTime()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.FooterMusic {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1.4rem;
  background-color: #fff;
  border-top: 1px solid #999;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  .footerLeft {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    div {
      margin-left: 0.16rem;
    }
    img {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
    }
    span {
      margin-right: 0.1rem;
      font-size: 0.2rem;
      color: #999;
    }
  }
  .footerRight {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>